<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="Generator" content="ECSHOP v2.7.3" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta content="telephone=no" name="format-detection">
<title></title>
<link href="themes/xm2013/css/jquery.fullPage.css" type="text/css"  rel="stylesheet">
<script type="text/javascript" src="themes/xm2013/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="themes/xm2013/js/jquery-ui-1.10.3.min.js"></script>
<script type="text/javascript" src="themes/xm2013/js/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function() {
	$.fn.fullpage({
		anchors: ['page1', 'page2', 'page3', 'page4', 'page5','page6'],
		'navigation': true,
		afterLoad: function(anchorLink, index){
			if(index == 2){
				$('.section2').find('p').delay(200).animate({
					left: '0'
				}, 1500, 'easeOutExpo');
			}
			if(index == 3){
				$('.section3').find('p').delay(500).animate({
					bottom: '5%'
				}, 1500, 'easeOutExpo');
			}
			if(index == 4){
				$('.section4').find('p').delay(500).animate({
					right: '0'
				}, 1500, 'easeOutExpo');
			}
			if(index == 5){
				$('.section5').find('p').fadeIn(2000);
			}
			if(index == 6){
				$('.section6').find('p').fadeIn(2000);
			}
		},
		onLeave: function(index, direction){
			if(index == '2'){
				$('.section2').find('p').delay(500).animate({
					left: '-120%'
				}, 1500, 'easeOutExpo');
			}
			if(index == '3'){
				$('.section3').find('p').delay(500).animate({
					bottom: '-120%'
				}, 1500, 'easeOutExpo');
			}
			if(index == '4'){
				$('.section4').find('p').delay(500).animate({
					right: '-120%'
				}, 1500, 'easeOutExpo');
			}
			if(index == '5'){
				$('.section5').find('p').fadeOut(2000);
			}
			if(index == '6'){
				$('.section6').find('p').fadeOut(2000);
			}
		}
	});
});
</script>
</head>

<body>
<center>
<div class="section section1">
	<div>
		<img src="themes/xm2013/images/logo.png"/ class="logopc">
		<img src="themes/xm2013/images/twosho.png"/ class="twoshopc">
	</div>
		<a href="#"><div class="anzhuo1"></div></a>
		<a href="#"><div class="pingguo1"></div></a>
</div>
<div class="section section2">
	<p><img src="themes/xm2013/images/VIp_1.png" class="bgbig"/></p>
</div>
<div class="section section3">
	<p><img src="themes/xm2013/images/VIp_2.png" class="bgbig"/></p>
</div>
<div class="section section4">
	<p><img src="themes/xm2013/images/VIp_3.png" class="bgbig"/></p>
</div>
<div class="section section5">
	<p><img src="themes/xm2013/images/VIp_4.png" class="bgbig"/></p>
</div>
<div class="section section6">
	<p><img src="themes/xm2013/images/VIp_5.png" class="bgbig"/></p>
</div>
</center>
</body>
<style>
.logopc{width: 7%;position: fixed;left: 38%;top: 75%;}
.twoshopc{left: 46%;top: 75%;width: 7%;position: fixed;}
.section1{background: url(themes/xm2013/images/VIpc_01.jpg);background-size: 100% 100%;background-repeat: no-repeat;}
.section2{background: url(themes/xm2013/images/VIpc_02.jpg);background-size: 100% 100%;background-repeat: no-repeat;}
.section3{background: url(themes/xm2013/images/VIpc_03.jpg);background-size: 100% 100%;background-repeat: no-repeat;}
.section4{background: url(themes/xm2013/images/VIpc_04.jpg);background-size: 100% 100%;background-repeat: no-repeat;}
.section5{background: url(themes/xm2013/images/VIpc_05.jpg);background-size: 100% 100%;background-repeat: no-repeat;}
.section6{background: url(themes/xm2013/images/VIpc_06.jpg);background-size: 100% 100%;background-repeat: no-repeat;}
.section p img{
	width: 50%;
	height: 50%;
}
.section2 p{position:absolute;left: -120%;bottom:20%}
.section3 p{position: absolute;bottom: -120%;left:35%}
.section4 p{position: absolute;right: -120%;bottom: 20%;}
.section5 p{position: absolute;display: none;bottom:15%;left: 23%;}
.section6 p{position: absolute;display: none;bottom:20%;left: 40%;}
.section .anzhuo1{width:13rem;height:3.25rem ;background-color: #FFFFFF;opacity: 0;margin-top:13%;margin-left: 54.5%;position: absolute;z-index: 999;}
.section .pingguo1{width:13rem;height:3.25rem ;background-color: #FFFFFF;opacity: 0;margin-top:16.5%;margin-left: 54.5%;position: absolute;z-index: 999;}
@media only screen and (width: 800px) {
	html {
		font-size: 18.550724px;
	}
.section .bgbig{
	width: 30%;
	height: 30%;
}
.section2 p{position:absolute;left: -60%;bottom:20%}
.section3 p{position: absolute;bottom: -60%;left:35%}
.section4 p{position: absolute;right: -60%;bottom: 20%;}
.section5 p{position: absolute;display: none;bottom:15%;left: 23%;}
.section6 p{position: absolute;display: none;bottom:20%;left: 40%;}
}
@media only screen and (width: 1280px) {
	html {
		font-size: 18.550724px;
	}
.section .bgbig{
	width: 35%;
	height: 35%;
}
.section2 p{position:absolute;left: -60%;bottom:20%}
.section3 p{position: absolute;bottom: -60%;left:35%}
.section4 p{position: absolute;right: -60%;bottom: 20%;}
.section5 p{position: absolute;display: none;bottom:15%;left: 23%;}
.section6 p{position: absolute;display: none;bottom:20%;left: 40%;}
}
@media only screen and (width: 1600px) {
	html {
		font-size: 18.550724px;
	}
.section .bgbig{
	width: 40%;
	height: 40%;
}
.section2 p{position:absolute;left: -60%;bottom:20%}
.section3 p{position: absolute;bottom: -60%;left:35%}
.section4 p{position: absolute;right: -60%;bottom: 20%;}
.section5 p{position: absolute;display: none;bottom:15%;left: 23%;}
.section6 p{position: absolute;display: none;bottom:20%;left: 40%;}
}
</style>
</html>